<template>
  <div>
    <!-- <a-alert class="card" message="请注意，说明中若有学位信息未上报提示，请通知学生由学生自己填写上报信息！学位信息上报入口为：学位管理→学位信息上报→学位信息录入" type="error" style="margin-bottom: 10px" /> -->
    <a-card class="card" :bordered="false">
      <a-radio-group @change="generateChange" v-model="generateNew">
        <a-radio :value="0">选择匹配已有分组</a-radio>
        <a-radio :value="1">生成新的分组</a-radio>
      </a-radio-group>
      <a-form :form="form">
        <a-row :gutter="48" v-if="generateNew !== ''">
          <a-col v-if="generateNew === 0" :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="分组号">
              <a-input v-decorator="[
                  'dbfzbh',
                  {
                    rules: [{ required: true, message: '请输入分组号!' }]
                  }
                ]"  placeholder="请输入..." />
            </a-form-item>
          </a-col>
          <template v-if="generateNew === 1">
            <!-- <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="所属院系">
                <a-select v-decorator="[
                  'ssyxm',
                  {
                    rules: [{ required: true, message: '请选择所属院系!' }]
                  }
                ]" :allowClear="true" showSearch :filterOption="filterOption" @change="handleSelectYx">
                  <a-select-option v-for="i in selectYxConfig" :key="i.id" :value="i.dwh">{{ i.dwh+'-'+i.dwmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}" >
              <a-form-item label="所属专业">
                  <a-select v-decorator="[
                  'sszym',
                  {
                    rules: [{ required: true, message: '请选择所属专业!' }]
                  }
                ]" :allowClear="true" showSearch :filterOption="filterOption" @change="handleSelectZy" >
                    <a-select-option v-for="i in selectZyConfig" :key="i.zyh" :value="i.zyh">{{ i.zyh+'-'+i.zymc }}</a-select-option>
                  </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
                <a-form-item label="学生类别">
                  <a-select v-decorator="[
                  'xslbm',
                  {
                    rules: [{ required: true, message: '请选择学生类别!' }]
                  }
                ]"  :allowClear="true" showSearch :filterOption="filterOption" @change="handleSelectXslb" >
                    <a-select-option v-for="i in TYPE0075" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                  </a-select>
                </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="年度"  >
                <a-select v-decorator="[
                  'dbnd',
                  {
                    rules: [{ required: true, message: '请选择年度!' }]
                  }
                ]" :allowClear="true" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="答辩日期" :required="true">
                <a-form-item style="width: 50%;float: left;">
                <a-date-picker v-decorator="[
                  'dbrq',
                  {
                    rules: [{ required: true, message: '请选择答辩日期!' }]
                  }
                ]"  />
                </a-form-item>
                <a-form-item style="width: 50%;float: left;">
                <a-select v-decorator="[
                  'dbrqswhxw',
                  {
                    rules: [{ required: true, message: '请选择时间段!' }]
                  }
                ]" :allowClear="true" showSearch :filterOption="filterOption" style="vertical-align: 1px">
                  <a-select-option v-for="i in TYPE0370" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
              <a-form-item label="答辩地点">
                <a-input v-decorator="[
                  'dbdd',
                  {
                    rules: [{ required: true, message: '请输入答辩地点!' }]
                  }
                ]"  placeholder="请输入..." />
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'

const selectArr = [
  'TYPE0126', //年级
  'TYPE0075', //学生类别
  'TYPE0370' //上午或下午
]

export default {
  props: {
    editVisible: {
      default: false
    }
  },
  data () {
    return {
      generateNew: '',
      // 条件配置
      selectYxConfig: [], //院系
      selectZyConfig: [], //专业
      //选中文案
      selectNames:{
        xslbmc:"",//学生类别名称
        yxmc:'',//院系名称
        zymc:"",//专业名称
      } 
    }
  },
  computed: {
    ...mapState({
      TYPE0075: state => state.app['TYPE0075'], // 学生类别
      TYPE0126: state => state.app['TYPE0126'], // 年级
      TYPE0370: state => state.app['TYPE0370'], // 上午或下午
    })
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created() {
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu() {
      let allRequest = [
        this.$api.base.collegeAll()
      ]
      Promise.all(allRequest).then(res => {
        this.selectYxConfig = res[0].data
      })
    },
    generateChange() {
      this.form.resetFields()
      this.selectZyConfig = []
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    //选择院系
    handleSelectYx(code,record) {
      this.form.resetFields(['sszym']);
      this.selectZyConfig = [];
      this.selectNames.yxmc = this.selectYxConfig.find(e=>e.dwh==code).dwmc
      this.$api.base.majorAll({ lsdwh: code }).then(res => {
        this.selectZyConfig = res.data;
      })
    },
    //选择专业
    handleSelectZy(code){
     this.selectNames.zymc = this.selectZyConfig.find(e=>e.zyh==code).zymc
    },
    //选择学生类别
    handleSelectXslb(code){
      this.selectNames.xslbmc = this.TYPE0075.find(e=>e.code==code).name
    }
  }
}
</script>
